<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>人员列表</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="__CSS__/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="__CSS__/font-awesome.min.css?v=4.4.0" rel="stylesheet">
    <link href="__CSS__/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
    <link href="__CSS__/animate.min.css" rel="stylesheet">
    <link href="__CSS__/style.min.css?v=4.1.0" rel="stylesheet">
</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInRight">
        <!-- Panel Other -->
        <div class="ibox float-e-margins">
            <div class="ibox-title">
                <h5>人员列表</h5>
            </div>
            <div class="ibox-content">
                <!--搜索框开始-->
                <form id='commentForm' role="form" method="post" class="form-inline pull-right layui-form">
                    <div class="content clearfix m-b">
                        <div class="form-group">
                            <!-- <label>客服名称：</label> -->
                            <select name="role" class="form-control" id="role">
                                <option value="">筛选类型</option>
                                {foreach name="role" key="id" item="vo"}
                                <option value="{$id}">{$vo}</option>
                                {/foreach}
                            </select>
                        </div>
                        <div class="form-group">
                            <label>上级名称：</label>
                            <input type="text" class="form-control" id="superior_name" name="superior_name">
                        </div>
                        <div class="form-group">
                            <label>名称：</label>
                            <input type="text" class="form-control" id="service_name" name="service_name">
                        </div>
                        <div class="form-group">
                            <label>负责人：</label>
                            <input type="text" class="form-control" id="username" name="user_name">
                        </div>
                        <div class="form-group">
                            <button class="btn btn-primary" type="button" style="margin-top:5px" id="search"><strong>搜 索</strong>
                        </button>
                        </div>
                    </div>
                </form>
                <!--搜索框结束-->
                <div class="example-wrap">
                    <div class="example">
                        <table id="cusTable">
                            <thead>
                                <th data-field="id">ID</th>
                                <th data-field="service_name">名称</th>
                                <th data-field="user_name">负责人</th>
                                <th data-field="user_avatar">头像</th>
                                <th data-field="superior_name">上级</th>
                                <th data-field="role">角色</th>
                                <th data-field="status">状态</th>
                                <th data-field="online">是否在线</th>
                                <th data-field="mobile">手机号</th>
                                <th data-field="operate">操作</th>
                            </thead>
                        </table>
                    </div>
                </div>
                <!-- End Example Pagination -->
            </div>
        </div>
    </div>
    <!-- End Panel Other -->
    <script src="__JS__/jquery.min.js?v=2.1.4"></script>
    <script src="__JS__/bootstrap.min.js?v=3.3.6"></script>
    <script src="__JS__/content.min.js?v=1.0.0"></script>
    <script src="__JS__/plugins/bootstrap-table/bootstrap-table.min.js"></script>
    <script src="__JS__/plugins/bootstrap-table/bootstrap-table-mobile.min.js"></script>
    <script src="__JS__/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
    <script src="__JS__/plugins/layer/layer.min.js"></script>
    <script type="text/javascript">
        function initTable() {
            //先销毁表格
            $('#cusTable').bootstrapTable('destroy');
            //初始化表格,动态从服务器加载数据
            $("#cusTable").bootstrapTable({
                method: "get", //使用get请求到服务器获取数据
                url: "{:url('users/index')}", //获取数据的地址
                striped: true, //表格显示条纹
                pagination: true, //启动分页
                pageSize: 10, //每页显示的记录数
                pageNumber: 1, //当前第几页
                pageList: [5, 10, 15, 20, 25], //记录数可选列表
                sidePagination: "server", //表示服务端请求
                paginationFirstText: "首页",
                paginationPreText: "上一页",
                paginationNextText: "下一页",
                paginationLastText: "尾页",
                queryParamsType: "undefined",
                queryParams: function queryParams(params) { //设置查询参数
                    var param = {
                        pageNumber: params.pageNumber,
                        pageSize: params.pageSize,
                        user_name: $('#username').val(),
                        service_name: $('#service_name').val(),
                        superior_name: $('#superior_name').val(),
                        role: $('#role').val(),
                    };
                    return param;
                },
                onLoadSuccess: function(res) { //加载成功时执行
                    if (111 == res.code) {
                        window.location.reload();
                    }
                    layer.msg("加载成功", {
                        time: 1000
                    });
                },
                onLoadError: function() { //加载失败时执行
                    layer.msg("加载数据失败");
                }
            });
        }

        $(document).ready(function() {
            //调用函数，初始化表格
            initTable();

            //当点击查询按钮的时候执行
            $("#search").bind("click", initTable);
        });

        function userDel(id) {
            layer.confirm('确认删除?', {
                icon: 3,
                title: '提示'
            }, function(index) {
                //do something
                $.getJSON("{:url('users/delUser')}", {
                    'id': id
                }, function(res) {
                    if (1 == res.code) {
                        layer.alert(res.msg, {
                            title: '友情提示',
                            icon: 1,
                            closeBtn: 0
                        }, function() {
                            initTable();
                        });
                    } else if (111 == res.code) {
                        window.location.reload();
                    } else {
                        layer.alert(res.msg, {
                            title: '友情提示',
                            icon: 2
                        });
                    }
                });

                layer.close(index);
            })

        }
    </script>
</body>

</html>